<template>
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="width:100%;height:30px"
  >
    <!-- 名字 -->
    <el-col v-if="type === 1">{{ data.name }}</el-col>
    <el-col v-else>
      <h3><i class="el-icon-office-building" /> {{ companyName }}</h3>
    </el-col>
    <!-- 右侧栏目 -->
    <el-col :span="4">
      <el-row type="flex" justify="end" align="middle">
        <!-- 管理人 -->
        <el-col>{{ type === 1 ? data.manager : '负责人' }}</el-col>
        <!-- 操作 -->
        <el-col>
          <!-- 下拉菜单 -->
          <el-dropdown trigger="click" @command="handleFn" v-if="type === 1">
            <span> 操作<i class="el-icon-arrow-down" /> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <!-- 编辑部门和删除部门只会在子节点上显示 -->
              <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
              <el-dropdown-item command="del">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span v-else>操作</span>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import eventBus from '@/utils/event-bus'
import { delDepartmentAPI } from '@/api/departments'
import { IDeparts } from '@/model/interface/departments'
// import { number } from 'echarts'

@Component({ name: 'TreeItems' })
export default class extends Vue {
  @Prop({
    type: Object
  })
  data!: IDeparts

  @Prop({
    type: Number,
    default: 1
  })
  type!: number

  @Prop({
    type: String,
    default: ''
  })
  companyName!: string

  handleFn(type: string) {
    const { id } = this.data
    // 删除
    if (type === 'del') {
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功!')
          delDepartmentAPI(id)
          this.$emit('reload') // 刷新数据
        })
        .catch(() => this.$message.info('已取消删除'))
    }
    // 添加
    if (type === 'add') eventBus.$emit('showDialogFn', id)
    // 编辑
    if (type === 'edit') eventBus.$emit('showDialogFn', id, true)
  }
}
</script>

<style scoped></style>
